<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/common_head :: commonHead('tree')"></head>
<body>
<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="inner-content">
            <!-- header-starts -->
            <div class="header-section">
                <div th:include="/header :: header"></div>
                <!--menu-right-->
                <!--//menu-right-->
                <div class="clearfix"></div>
            </div>
            <!-- //header-ends -->
            <!--/outer-wp-->
            <div class="outter-wp">
                <!--sub-heard-part-->
                <div class="sub-heard-part">
                    <ol class="breadcrumb m-b-0">
                        <li><a href="index.html">Home</a></li>
                        <li class="active">Maps</li>
                    </ol>
                </div>
                <!--//sub-heard-part-->
                <!--/graph-visual-->
                <div class="graph-visual">
                    <h2 class="inner-tittle">树状图</h2>
                    <div class="graph">
                        <div class="map_container">
                            <input type="file" id="data" name="data"/>
                            <button type="button" id="draw">绘图</button>
                            <div id="tree" style="width: 1000px;height:800px;"></div>
                        </div>
                    </div>
                </div>
                <!--/graph-visual-->

            </div>
            <!--//outer-wp-->
            <!--footer section start-->
            <footer th:include="/footer :: footer">
                <!--<p>Copyright &copy; 2018.Panda company</p>-->
            </footer>
            <!--footer section end-->
        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
    <div class="sidebar-menu" th:include="/sidebar :: sidebar"></div>
    <div class="clearfix"></div>
</div>


<script>
    myChart = echarts.init(document.getElementById("tree"));
    myChart.showLoading();
    $.get('/flare.json', function (data) {
        myChart.hideLoading();

        myChart.setOption(option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series:[
                {
                    type: 'tree',

                    data: [data],

                    left: '2%',
                    right: '2%',
                    top: '8%',
                    bottom: '20%',

                    symbol: 'emptyCircle',

                    orient: 'vertical',

                    expandAndCollapse: true,

                    label: {
                        normal: {
                            position: 'top',
                            rotate: -90,
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 9
                        }
                    },

                    leaves: {
                        label: {
                            normal: {
                                position: 'bottom',
                                rotate: -90,
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        }
                    },

                    animationDurationUpdate: 750
                }
            ]
        });
    });

</script>
</body>
</html>